<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../css/all.css">
    <link rel="stylesheet" href="../css/foot.css">
    <link rel="stylesheet" href="../images/jpg/logo.jpg">
    <link rel="stylesheet" href="../css/index/register_body.css">
    <style>
        .minput {
            display: none;
        }
        .yz {
            display: block;
        }
    </style>
    <script src="../js/ajax.js"></script>
</head>
<body>
    <div>
        <div class="head">
            <div class="content item_clear">
               <div class="head_img floatl">
                    品优购
               </div> 
            </div>
        </div>
        <div class="register_body">
            <div class="content">
                <form action="">
                    <div class="header">
                        <div class="floatl">
                            注册新用户
                        </div>
                        <p class="floatr">
                            我有账号，去<a href="login.html">登陆</a>
                        </p>
                    </div>
                    <div class="article">
                        <section class="body_inp">
                            <ul>
                                <li>
                                    <label for="username">用户名：</label>
                                    <input type="text" id="username" name="username" placeholder="请输入您的用户名">
                                </li>
                                <li>
                                    <label for="tel">手机号：</label>
                                    <input type="text" pattern="[0-9]{11}" id="tel" name="tel" placeholder="请输入11位手机号码">
                                </li>
                                <!-- <li>
                                    <label for="yzm">短信验证码：</label><input type="text" id="yzm" name="yzm">
                                </li> -->
                                
                                <li>
                                    <label for="passwords1">登陆密码：</label>
                                    <input type="password" id="passwords1" name="passwords1">
                                </li>
                                <li>
                                    <label for="passwords2">确认密码：</label>
                                    <input type="password" id="passwords2" name="passwords2">
                                </li>
                            </ul>
                        </section>
                        <article>
                            <input type="checkbox" id="assit"><label for="assit">同意协议并注册</label>
                            <span>《知果果用户协议》</span>
                        </article>
                        <div class="floatr" style="position: relative;left: -50%;">
                            <button class="submit">完成注册</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="foot">
            <div class="content">
                <div class="foot_span1">
                    <ul class="item_clear">
                        <li><a href="">关于我们</a><span>|</span></li>
                        <li><a href="">联系我们</a><span>|</span></li>
                        <li><a href="">联系客服</a><span>|</span></li>
                        <li><a href="">商家入驻</a><span>|</span></li>
                        <li><a href="">营销中心</a><span>|</span></li>
                        <li><a href="">手机品优购</a><span>|</span></li>
                        <li><a href="">友情链接</a><span>|</span></li>
                        <li><a href="">销售联盟</a><span>|</span></li>
                        <li><a href="">品优购社区</a><span>|</span></li>
                        <li><a href="">品优购公益</a><span>|</span></li>
                        <li><a href="">English Site</a><span>|</span></li>
                        <li><a href="">Contact U</a></li>
                    </ul>
                </div>
                <div class="foot_span2">
                    <p>地址：北京市昌平区建材西路金燕龙办公楼一层&nbsp;邮编：100096&nbsp;电话：400-618-4000&nbsp;传真：010-82935100&nbsp;邮箱：zhanghj+itcast.cn</p>
                </div>
                <div class="foot_span3">
                    京ICP&nbsp;08001421&nbsp;号京公网安备&nbsp;110108007702
                </div>
            </div>   
        </div>
    </div>
</body>
<script>
    //  id tel yzm  passwords1  passwords2  assit checkbox
    //  submit class 
    let usernameEle = document.querySelector("#username");
    let telEle = document.querySelector("#tel");
    // let yzmEle = document.querySelector("#yzm");
    let pa1Ele = document.querySelector("#passwords1");
    let pa2Ele = document.querySelector("#passwords2");
    let assEle = document.querySelector("#assit");
    let btnEle = document.querySelector(".submit");
    // let minputEle = document.querySelector(".minput");
    // yzmEle.onfocus = function (){
    //     minputEle.classList.toggle("yz");
    //     // console.log(1111111111);
    // }
    // yzmEle.onblur = function (){
    //     minputEle.classList.toggle("yz");
    //     // console.log(1111111111);
    // }
    btnEle.onclick = function (event){
        let e = event || window.event ;
        e.preventDefault();
        let username = usernameEle.value;
        let tel = telEle.value;
        let pass1 = pa1Ele.value;
        let pass2 = pa2Ele.value;
        let assit = assEle.checked;
        // console.log(username,tel,pass1,pass2,assit);
        if( !assit ){
            alert("请勾选同意协议");
        }
        if( !username){
            alert("用户名不能为空");
        }
        if( !tel ){
            alert("手机号不能为空");
        }
        if( !pass1 || !pass2 ){
            alert("密码不能为空");
        }
        if( pass1 !== pass2 ) {
            alert("两次输入密码不一致");
        }
        let reg = /^1[5,9]\d+{9}$/g;
        if (!reg.test(tel)){
            alert("请输入规范的手机号");
        }
        ajax({
            url:'',
            method:'post',
            
        });
    } 
</script>
</html>